<template>
    <div class="container">
        <el-row type="flex" class="row-bg">
            <el-col :span="4" class="flexs">
                <el-input
                    placeholder="请输入分组"
                    class="iptlss"
                    prefix-icon="el-icon-search"
                    v-model="zname">
                </el-input>
                <el-button  type="primary" class="tbut" size="mini" plain>添加分组</el-button>
                <el-button  type="primary" class="tbut" size="mini" plain>删除分组</el-button>
            </el-col>
            <el-col :span="8" class="flexs" >
                <el-tabs v-model="activeName1">
                    <el-tab-pane label="消息" name="first">
                        <el-button  type="primary" class="tbut" size="mini" plain>新建会话</el-button>
                        <el-input
                            placeholder="请输入分组"
                            class="iptlss"
                            prefix-icon="el-icon-search"
                            v-model="zname">
                        </el-input>
                        <el-button  type="primary" class="tbut" size="mini" plain>搜索</el-button>
                    </el-tab-pane>
                    <el-tab-pane label="群聊" name="second">2222</el-tab-pane>
                    <el-tab-pane label="联系人" name="third">
                        <el-tabs v-model="activeName3">
                            <el-tab-pane label="好友" name="first">3333</el-tab-pane>
                            <el-tab-pane label="群聊" name="second">333</el-tab-pane>
                        </el-tabs>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
            <el-col :span="8" class="flexs">
                <div>
                    <el-input
                    type="textarea"
                    :rows="8"
                    placeholder="请输入内容"
                    v-model="inputMsg">
                    </el-input>
                    <el-button type="primary" class="tbut" @click="emoji_show=true" plain>{{emoji[0]}}</el-button>
                    <el-button class="tbuts"  type="primary" plain>enter发送 shift+enter换行</el-button>
                    <el-button class="tbuts"  type="primary" plain>翻译</el-button>
                </div>
            </el-col>
            <el-col :span="7" class="flexs">
                <el-tabs v-model="activeName2">
                    <el-tab-pane label="翻译助手" name="first">
                        <el-select class="sel" v-model="value1" placeholder="请选择">
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                        <i  class="el-icon-right"></i>    
                        <el-select  class="sel" v-model="value2" placeholder="请选择">
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                        <el-input
                            type="textarea"
                            :rows="8"
                            placeholder="请输入内容"
                            v-model="fyinputMsg">
                        </el-input>
                    </el-tab-pane>
                    <el-tab-pane label="快速助手" name="second">
                        <el-collapse v-model="activeNames" @change="handleChange">
                            <el-collapse-item title="一致性 Consistency" name="1">
                                <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
                                <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
                            </el-collapse-item>
                            <el-collapse-item title="反馈 Feedback" name="2">
                                <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
                                <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
                            </el-collapse-item>
                            <el-collapse-item title="效率 Efficiency" name="3">
                                <div>简化流程：设计简洁直观的操作流程；</div>
                                <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
                                <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
                            </el-collapse-item>
                            <el-collapse-item title="可控 Controllability" name="4">
                                <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
                                <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
                            </el-collapse-item>
                        </el-collapse>
                    </el-tab-pane>
                    <el-tab-pane label="好友信息" name="third">好友信息</el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>

        <el-dialog :visible.sync="emoji_show"  width="50%" :before-close="handleClose">
            <div class="emotion-list">
                <i v-for="v in emoji" class="tz"  @click="addEmoji(v)">{{v}}</i>
            </div>
        </el-dialog>
    </div>
</template>
<script>
const emojiJson = require("@/assets/emoji.json");
export default {
    name: 'ComplexTable',
    components: { },
    data() {
        return {
            tableKey: 0,
            list:[],
            zname:'',
            emoji_show: false,
            emoji:'',
            id: undefined,
            inputMsg:'',
            fyinputMsg:'',
            lxtype: 1,
            pcontent: '',
            fcontent: '',
            content: '',
            VcardName: '',
            value1:'自动',
            value2:'自动',
            options:[
                {
                   name:'自动',
                   value:'自动' 
                },
                {
                   name:'中文',
                   value:'中文' 
                },
                {
                   name:'英文',
                   value:'英文' 
                },
                {
                   name:'日语',
                   value:'日语' 
                },{
                   name:'韩语',
                   value:'韩语' 
                },{
                   name:'西班牙语',
                   value:'西班牙语' 
                },{
                   name:'俄语',
                   value:'俄语' 
                },{
                   name:'德语',
                   value:'德语' 
                },{
                   name:'印度语',
                   value:'印度语' 
                },{
                   name:'葡萄牙语',
                   value:'葡萄牙语' 
                }
            ],
            activeName1:'first',
            activeName2:'first',
            activeName3:'first', 
        }
    },
    created() {
        this.emoji = emojiJson.data.split(',');
        console.log(this.emoji)
    },

    methods:{
        handleClose(){
            this.emoji_show = false
        },
        addEmoji(e){
            console.log(e);
            this.emoji_show = false
            let msgs = this.inputMsg
            this.inputMsg = msgs+e
        }
    }
}

</script>
<style lang="scss" second>
.container{
    padding:10px;
    .iptlss{
        width:180px;
    }
    .tbut{
        margin-top:5px;
    }
   
    .tz{
        display:black;
        margin-left:5px;
        margin-top:15px;
        height:15px;
        width:15px;
    }
    .tz:hover {
            border:1px solid #409EFF;
            transform: scale(1.1); /*放大1.1倍*/
    }
    .flexs{
        border:1px solid #409EFF;
        border-radius:5px;
        padding:10px;
        margin:5px;
        min-height: 300px;
    }
    .sel{
        width:120px;
    }
}
</style>